<template>
    <view
        class="title"
        :style="{
            paddingTop: menuButtonInfo.top + 'px',
            height: menuButtonInfo.height + 'px'
        }"
    >
        <image
            class="back"
            @click="goBack"
            src="@/static/common/back-black.png"
            v-if="back && color == 'black'"
        />
        <image
            class="back"
            @click="goBack"
            src="@/static/common/back-white.png"
            v-if="back && color == 'white'"
        />
        <text v-if="!isSlot" :style="{ color: color }"> {{ title }} </text>
        <view
            v-else
            class="custom"
            :style="{
                width: 'calc( 750rpx - ' + menuButtonInfo.width + 'px )'
            }"
        >
            <slot :width="menuButtonInfo.width"></slot>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, useSlots } from 'vue'
defineProps({
    title: {
        type: String,
        default: '子弹渠道商服务'
    },
    back: {
        type: Boolean,
        default: true
    },
    color: {
        type: String,
        default: 'black'
    }
})
const slot = useSlots()
const isSlot = ref(slot.default)
const menuButtonInfo = ref(uni.getMenuButtonBoundingClientRect())
const goBack = () => {
    uni.navigateBack({
        delta: 1
    })
}
defineExpose()
</script>
<style lang="scss" scoped>
.title {
    height: 60rpx;
    color: white;
    display: flex;
    align-items: center;
    font-size: 4vw;
    z-index: 1;
    position: relative;
}
.back {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    left: 24rpx;
}
.title > text {
    line-height: 60rpx;
    margin: 0 auto;
}
</style>
